<template>
  <div>
    <!-- 按钮颜色 -->
    <el-button>默认按钮</el-button>
    <el-button type="primary">默认按钮</el-button>
    <el-button type="danger">默认按钮</el-button>
    <el-button type="success">默认按钮</el-button>
    <el-button type="info">默认按钮</el-button>
    <el-button type="warning">警告</el-button>
    <!-- 朴素按钮 -->
    <el-button type="primary" plain>默认按钮</el-button>
    <!-- 胶囊按钮 -->
    <el-button type="primary" round>默认按钮</el-button>
    <!-- 圆角按钮 -->
    <el-button type="primary" circle>默</el-button>
    <!-- 带图标的按钮 -->
    <el-button type="primary" icon="el-icon-search" round>搜索</el-button>
    <!-- 禁用按钮 -->
    <el-button type="primary" disabled>默认按钮</el-button>
    <!-- 文字按钮 -->
    <el-button type="text" disabled>文字按钮</el-button>
    <!-- 加载中按钮 -->
    <el-button type="primary" loading>按钮</el-button>
    <!-- 小按钮 -->
    <el-button type="primary" size="mini">按钮</el-button>
    <el-button type="primary" size="small">按钮</el-button>

    <hr />
    <!-- 先看现有能不能满足要求,不能就用iconfont  -->
    <i class="el-icon-ice-cream"></i>
    <i class="el-icon-sugar"></i>

    <hr />
    <!-- 没有v-model文字输不进去 -->
    <!-- prefix-icon 前缀图标 -->
    <!-- suffix-icon 后缀图标 -->
    <!-- clearable 设置文字是不是可以清空 -->
    <el-input
      v-model="msg"
      clearable
      style="width: 400px"
      prefix-icon="el-icon-apple"
      suffix-icon="el-icon-sugar"
      maxlength="10"
      show-word-limit
    ></el-input>
    <hr>
    <el-switch v-model="flag"></el-switch>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '',
      flag: true
    }
  },
  methods: {}
}
</script>

<style scoped lang='scss'>
.el-icon-ice-cream {
  color: red;
  font-size: 40px;
}
</style>
